<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #con{
            position: relative;
            width: 400px;
            height: 500px;
            margin: 70px auto;
        
        }
      canvas{
          position: absolute;
          left: 50%;
          margin-left: -200px;
      }
    #play{
        width: 60px;
        height: 60px;
        position: absolute;
        left:170px;
        top:440px;

    }
    </style>
</head>
<body>
<div id="con">
    <canvas width="400" height="500" id="canvas">
        您的浏览器不支持canvas，请更新！
    </canvas>
    <div id="play"></div>
</div>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    var bg=new Image();
    var disc=new Image();
    var pause=new Image();
    var play=new Image();
    bg.src="img/bg.jpg";
    disc.src="img/disc.png";
    pause.src="img/pause.png";
    play.src="img/play.png";
    var progress=0;
    bg.onload=function () {
        drawImg()
    }
    disc.onload=function () {
        drawImg()
    }
    pause.onload=function () {
        drawImg()
    }
    play.onload=function () {
        drawImg()
        ctx.beginPath();
        ctx.lineWidth=30;
        ctx.arc(200,250,105,0,2*Math.PI);
        ctx.stroke();
    }
    function drawImg(){
        progress+=25;
        if(progress==100){
            ctx.drawImage(bg,0,0);
            ctx.drawImage(disc,110,160,180,180);
            ctx.drawImage(pause,170,440,60,60);
            ctx.drawImage(play,170,440,60,60);
        }
    }
</script>
</html>